<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件demo</title>
    <script src="vue.js"></script>
</head>
<body>
        <!--<div id="app">
                <app-nav></app-nav>
                <app-view>
                  <app-sidebar></app-sidebar>
                  <app-content></app-content>
                </app-view>
            </div> -->



    <div id="app">
        <!-- 创建一个组件实例 -->
        <ol>
            <todo-item v-for='item in gro' v-bind:todo='item' v-bind:key='item.id'>

            </todo-item>
        </ol>
    </div>


    <!-- vue组件：是可复用的vue实例，将重复的功能封装为组件 如下为创建组件的实例-->
    <div id="app2">
        <!-- 标签名称即组件名称 -->
        <h3>插槽插入的内容</h3>
        <button-counter title="标题1---------" @clicknow='clicknow'></button-counter><!-- 通过事件绑定的方式执行函数clicknow-->
        <button-counter title="标题2---------"> <h5>插槽插入的内容</h5>   </button-counter><!-- 组件可以复用，互相不影响 -->
    </div>
    

    <script>
        Vue.component('todo-item',{
            props: ['todo'],//组件通过prop接口与父单元进行良好的解耦
            template: '<li>{{todo.text}}</li>'
        })

        var app = new Vue({
            el: '#app',
            data: {
                gro: [
                    {id: 0, text: '蔬菜'},
                    {id: 1, text: '水果'},
                    {id: 2, text: '巴啦啦'}
                ]
            }
        })
    </script>

    

    <script>
        // 定义一个组件，组件名称button-counter  Vue.component('todo-item', {props: ,data: {},template: '<li>这是个待办项</li>'  })
        Vue.component('button-counter',{
            props: ['title'],//自定义属性
            data: function() {
                return {
                    count: 0
                }
            },//在同一个模板内使用多个标签，需要用div盒子将它们全部包裹起来  <slot></slot>表示组件的插槽，通过插槽可以在组件内任意位置插入任意的html内容和标签
            // template: '<div>   <h1>哈哈</h1>    <button v-on:click="count++"> {{title}}点我{{count}}次 </button>       </div>',
            template: '<div>   <h1>哈哈</h1>    <button v-on:click="clickfun"> {{title}}点我{{count}}次 </button>       <slot></slot></div>',
            methods: {
                clickfun: function() {
                    this.count++;
                    this.$emit('clicknow',this.count);//通过emit方法触发clicknow函数，然后监听事件通过元素绑定的方式执行clicknow函数
                }
            }
        })

        var app2=new Vue({
            el: '#app2',
            data: {

            },
            methods: {
                clicknow: function(e) {
                    console.log(e);
                }
            }
        });
    </script>
</body>
</html>